<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showMsg } from '@/assets/js/utils'
import { addUpdateCarNumber } from '@/assets/api/safe'
const router = useRouter()
const route = useRoute()
function goBack() {
    router.back()
}
// 初始化form
const numberId = route.query.id
const number = route.query.number
const newForm = reactive({
    car_plate: number || '',
    id: numberId || '',
})
const newFormRef = ref(null)
function submitAction() {
    newFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            const { id, car_plate } = newForm
            const params = { car_plate }
            if (id) {
                params.id = id
            }
            addUpdateCarNumber(params).then(() => {
                showMsg('保存成功')
                goBack()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<template>
    <el-page-header @back="goBack">
        <template #content>
            <span>新增车牌</span>
        </template>
    </el-page-header>
    <div class="white-box d-flex-1 mt-10">
        <el-row :gutter="50">
            <el-col :span="16">
                <el-form ref="newFormRef" :model="newForm" label-width="130px">
                    <el-form-item
                        label="车牌号："
                        prop="car_plate"
                        :rules="[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]"
                    >
                        <el-input
                            placeholder="请输入"
                            v-model.trim="newForm.car_plate"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <el-button
                    type="primary"
                    @click="submitAction"
                    style="margin-left: 120px"
                >
                    保存
                </el-button>
            </el-col>
            <el-col :span="8" class="article"> </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped></style>
